<template>
  <div class="chart-content">
    <div class="title">产线灌装水耗情况</div>
    <div class="wrap">
      <div class="left">
        <div class="sub-title">年度产线灌装水单耗</div>
        <CustomChart
          v-if="option1.xAxis.data.length"
          ref="CustomChart1"
          class="chart"
          :option="option1"
          :enableClickOptions="['xAxis.category', 'seriesZoneSameWidthxAxis']"
          :defaultZoomPosition="{ xAxis: 'currentMonth' }"
          @active-xAxisLabel-change="handleXAxisCategroyChange1"
        />
        <div v-else class="no-data">暂无数据</div>
      </div>
      <div class="right">
        <div class="sub-title">月度产线灌装水单耗</div>
        <CustomChart
          v-if="option2.xAxis.data.length"
          class="chart"
          :option="option2"
          :defaultZoomPosition="{ xAxis: 'notEmpty', seriesName: '水单耗' }"
        />
        <div v-else class="no-data">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import CustomChart from "../../components/CustomChart";
import {
  getLineMonthWaterUseInfo,
  getLineDayWaterUseInfo,
} from "@/api/dashboard/blowIrriagtionSpinLineMonthly";
import { transform, getLastSerieData } from "./commom";
const colors2 = [
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#6AFFF0", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#183845", // 100% 处的颜色
      },
    ],
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#FFC3B5", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#5C3D24", // 100% 处的颜色
      },
    ],
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#A7FF76", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#A4FF32", // 100% 处的颜色
      },
    ],
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#FF6A23", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#FFA432", // 100% 处的颜色
      },
    ],
  },
];
export default {
  name: "LeftChart3",
  components: { CustomChart },
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    refreshKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      option1: {
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#6AFFF0", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#183845", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#FFC3B5", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#5C3D24", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#A7FF76", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#A4FF32", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#FF6A23", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#FFA432", // 100% 处的颜色
              },
            ],
          },
        ],
        grid: {
          top: 60,
          left: 60,
          bottom: 40,
          right: 60,
        },
        title: {
          text: "",
          left: 20,
          textStyle: {
            color: "#ffffff",
            fontSize: 14,
            fontWeight: 500,
            rich: {
              highlight1: {
                color: "#46fbff",
                fontSize: 14,
              },
              highlight2: {
                color: "#ff7d28",
                fontSize: 14,
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          padding: [5, 10],
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: [
            {
              name: "产线产量",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              textStyle: {
                padding: [0, -6],
              },
            },
            {
              name: "产线灌装量",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              textStyle: {
                padding: [0, -6],
              },
            },
            { name: "水单耗" },
            { name: "水单耗标准" },
          ],
          right: 20,
          textStyle: {
            color: "#ffffff",
          },
          // itemWidth: 14,
          itemHeight: 13,
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 5,
            xAxisIndex: 0,
            filterMode: "empty",
          },
          {
            type: "slider",
            startValue: 0,
            endValue: 5,
            bottom: "3%",
            top: "92%",
            xAxisIndex: 0,
            showDetail: false,
            borderColor: "rgba(167,183,204,0.45)",
            fillerColor: "rgba(167,183,204,0.2)",
            filterMode: "empty",
          },
        ],
        xAxis: {
          data: [],
          triggerEvent: true,
          axisLine: {
            lineStyle: {
              color: "#485073",
            },
          },
          axisLabel: {
            interval: 0,
            color: "rgba(255, 255, 255, 0.6)",
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "value",
            name: "吨",
            nameGap: 12,
            nameTextStyle: {
              color: "rgba(255, 255, 255, 0.6)",
              align: "right",
            },
            position: "left",
            splitLine: {
              lineStyle: {
                color: "#485073",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "rgba(255, 255, 255, 0.6)",
              fontSize: 11,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
            splitNumber: 5,
            // min: 0,
            // max: function (value) {
            //   return value.max;
            // },
          },
          {
            name: "吨/吨",
            nameGap: 12,
            nameTextStyle: {
              color: "rgba(255, 255, 255, 0.6)",
              align: "left",
            },
            position: "right",
            alignTicks: true,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#485073",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "rgba(255, 255, 255, 0.6)",
              fontSize: 11,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
            splitNumber: 5,
            // min: 0,
            // max: function (value) {
            //   return value.max;
            // },
          },
        ],
        series: [
          {
            name: "产线产量",
            data: [],
            type: "bar",
            barWidth: 16,
            barGap: 0,
            label: {
              show: true,
              position: "top",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
            yAxisIndex: 0,
          },
          {
            name: "产线灌装量",
            data: [],
            type: "bar",
            barWidth: 16,
            barGap: "10%",
            label: {
              show: true,
              position: "top",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
            yAxisIndex: 0,
          },
          {
            name: "水单耗",
            data: [],
            type: "line",
            connectNulls: true,
            label: {
              show: true,
              position: "top",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
            yAxisIndex: 1,
          },
          {
            name: "水单耗标准",
            data: [],
            type: "line",
            connectNulls: true,
            label: {
              show: true,
              position: "top",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
            yAxisIndex: 1,
          },
        ],
      },
      option2: {
        color: colors2,
        grid: {
          top: 60,
          left: 60,
          bottom: 40,
          right: 60,
        },
        title: {
          text: "",
          left: 20,
          textStyle: {
            color: "#ffffff",
            fontSize: 14,
            fontWeight: 500,
            rich: {
              highlight1: {
                color: "#46fbff",
                fontSize: 14,
              },
              highlight2: {
                color: "#ff7d28",
                fontSize: 14,
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          padding: [5, 10],
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: [
            {
              name: "产线产量",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              textStyle: {
                padding: [0, -6],
              },
            },
            {
              name: "产线灌装量",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              textStyle: {
                padding: [0, -6],
              },
            },
            { name: "水单耗" },
            { name: "水单耗标准" },
          ],
          right: 20,
          textStyle: {
            color: "#ffffff",
          },
          // itemWidth: 14,
          itemHeight: 13,
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 5,
            xAxisIndex: 0,
            filterMode: "empty",
          },
          {
            type: "slider",
            startValue: 0,
            endValue: 5,
            bottom: "3%",
            top: "92%",
            xAxisIndex: 0,
            showDetail: false,
            borderColor: "rgba(167,183,204,0.45)",
            fillerColor: "rgba(167,183,204,0.2)",
            filterMode: "empty",
          },
        ],
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: "#485073",
            },
          },
          axisLabel: {
            interval: 0,
            color: "rgba(255, 255, 255, 0.6)",
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "value",
            name: "吨",
            nameGap: 12,
            nameTextStyle: {
              color: "rgba(255, 255, 255, 0.6)",
              align: "right",
            },
            position: "left",
            splitLine: {
              lineStyle: {
                color: "#485073",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "rgba(255, 255, 255, 0.6)",
              fontSize: 11,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
            splitNumber: 5,
            // min: 0,
            // max: function (value) {
            //   return value.max;
            // },
          },
          {
            name: "吨/吨",
            nameGap: 12,
            nameTextStyle: {
              color: "rgba(255, 255, 255, 0.6)",
              align: "left",
            },
            position: "right",
            alignTicks: true,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#485073",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "rgba(255, 255, 255, 0.6)",
              fontSize: 11,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
            splitNumber: 5,
            // min: 0,
            // max: function (value) {
            //   return value.max;
            // },
          },
        ],
        series: [
          {
            name: "产线产量",
            data: [],
            type: "bar",
            barWidth: 16,
            barGap: 0,
            label: {
              show: true,
              position: "top",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
            yAxisIndex: 0,
          },
          {
            name: "产线灌装量",
            data: [],
            type: "bar",
            barWidth: 16,
            barGap: "10%",
            label: {
              show: true,
              position: "top",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
            yAxisIndex: 0,
          },
          {
            name: "水单耗",
            data: [],
            type: "line",
            connectNulls: true,
            label: {
              show: true,
              position: "top",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
            yAxisIndex: 1,
            markPoint: {
              symbol: "circle",
              symbolSize: 1,
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
              label: {
                position: "right",
                offset: [10, 0],
                color: colors2[2].colorStops[1].color,
              },
              data: [],
            },
          },
          {
            name: "水单耗标准",
            data: [],
            type: "line",
            connectNulls: true,
            label: {
              show: true,
              position: "top",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
            yAxisIndex: 1,
          },
        ],
      },
      activeMonthIndex: null, // 默认显示的横坐标
    };
  },
  created() {
    this.getData1();
  },
  methods: {
    async getData1() {
      if (!this.lineItem) {
        return;
      }

      try {
        const { lineId } = this.lineItem.properties;
        const params = { lineId };
        const res = await getLineMonthWaterUseInfo(params);

        const {
          yearUnitConsum,
          monthProduceWaters,
          monthConsumWater,
          monthUnitConsums,
          monthStandUnitConsums,
        } = res.data;

        let xAxisData = [];
        let seriesData1 = [];
        let seriesData2 = [];
        let seriesData3 = [];
        let seriesData4 = [];
        (monthProduceWaters || []).forEach((ele, index) => {
          const _monthProduceWaters = transform(
            monthProduceWaters[index].indexValue
          );
          const _monthConsumWater = transform(
            monthConsumWater[index].indexValue
          );
          const _monthUnitConsums = transform(
            monthUnitConsums[index].indexValue
          );
          const _monthStandUnitConsums = transform(
            monthStandUnitConsums[index].indexValue
          );
          xAxisData.push({
            value: ele.dateStr,
            dateStr: ele.dateStr,
            monthProduceWaters: _monthProduceWaters,
            monthConsumWater: _monthConsumWater,
            monthUnitConsums: _monthUnitConsums,
            monthStandUnitConsums: _monthStandUnitConsums,
          });
          seriesData1.push(_monthProduceWaters);
          seriesData2.push(_monthConsumWater);
          seriesData3.push(_monthUnitConsums);
          seriesData4.push(_monthStandUnitConsums);
        });

        this.option1.title.text = `年累计灌装水单耗为：{highlight1|${this.toFix(
          yearUnitConsum,
          2
        )}}吨/吨`;
        this.option1.xAxis.data = xAxisData;
        this.option1.series[0].data = seriesData1;
        this.option1.series[1].data = seriesData2;
        this.option1.series[2].data = seriesData3;
        this.option1.series[3].data = seriesData4;
      } catch (error) {
        this.option1.title.text = `年累计灌装水单耗为：{highlight1|0}吨/吨`;
        this.option1.xAxis.data = [];
        this.option1.series[0].data = [];
        this.option1.series[1].data = [];
        this.option1.series[2].data = [];
        this.option1.series[3].data = [];
        console.error(error);
      }

      this.$nextTick(() => {
        if (this.option1.xAxis.data?.length > 0) {
          if (this.activeMonthIndex == null) {
            // 高亮显示的月份，默认本月
            const currMonth = this.parseTime(new Date(), "{y}-{m}");
            this.activeMonthIndex = this.option1.xAxis.data.findIndex(
              (ele) => ele.value == currMonth
            );
          }
          this.$refs.CustomChart1 &&
            this.$refs.CustomChart1.updatexAxisLabelActives(
              this.activeMonthIndex
            );
        } else {
          this.getData2();
        }
      });
    },
    // 获取日生产数据
    async getData2(monthData) {
      try {
        if (!monthData) {
          throw "月份为空";
        }
        const { lineId } = this.lineItem.properties;
        const params = {
          lineId,
          monthStr: monthData.dateStr,
        };
        const res = await getLineDayWaterUseInfo(params);

        const {
          monthUnitConsum,
          dayProduceWaters,
          dayConsumWater,
          dayUnitConsums,
          dayStandUnitConsums,
        } = res.data;

        let xAxisData = [];
        let seriesData1 = [];
        let seriesData2 = [];
        let seriesData3 = [];
        let seriesData4 = [];
        dayProduceWaters.forEach((ele, index) => {
          xAxisData.push({
            value: ele.dateStr,
            ...ele,
          });
          seriesData1.push({
            value: transform(dayProduceWaters[index].indexValue),
            dateStr: ele.dateStr,
          });
          seriesData2.push({
            value: transform(dayConsumWater[index].indexValue),
            dateStr: ele.dateStr,
          });
          seriesData3.push({
            value: transform(dayUnitConsums[index].indexValue),
            dateStr: ele.dateStr,
          });
          seriesData4.push({
            value: transform(dayStandUnitConsums[index].indexValue),
            dateStr: ele.dateStr,
          });
        });

        this.option2.title.text = `月累计灌装水单耗为：{highlight1|${this.toFix(
          monthUnitConsum,
          2
        )}}吨/吨`;
        this.option2.xAxis.data = xAxisData;
        this.option2.series[0].data = seriesData1;
        this.option2.series[1].data = seriesData2;
        this.option2.series[2].data = seriesData3;
        this.option2.series[3].data = seriesData4;

        // 尾部累计
        const lastSerieData3 = getLastSerieData(seriesData3);
        if (lastSerieData3) {
          this.option2.series[2].markPoint.data = [
            {
              name: "累计",
              yAxis: lastSerieData3.value,
              xAxis: lastSerieData3.dateStr,
              value: `累计: ${monthData.monthUnitConsums}`,
            },
          ];
        } else {
          this.option2.series[2].markPoint.data = [];
        }
      } catch (error) {
        this.option2.title.text = `月累计灌装水单耗为：{highlight1|0}吨/吨`;
        this.option2.xAxis.data = [];
        this.option2.series[0].data = [];
        this.option2.series[1].data = [];
        this.option2.series[2].data = [];
        this.option2.series[3].data = [];
        this.option2.series[2].markPoint.data = [];
        console.error(error);
      }
    },
    // 点击横坐标的年月，显示当月的水耗
    handleXAxisCategroyChange1(index) {
      if (index || index == 0) {
        this.activeMonthIndex = index;
        this.getData2(this.option1.xAxis.data[index]);
      } else {
        this.getData2();
      }
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData1();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.chart-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .wrap {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .left {
    flex: 1;
    width: 50%;
    height: 100%;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
  }

  .right {
    flex: 1;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .chart {
    flex: 1;
  }
}
</style>
